<template>
	<view class="lunbo">
		<swiper autoplay={true} interval=3000 circular={true} duration=1000>
		<swiper-item v-for="(v,i) in picture" :key="i">
			<image :src="'/static/image-che/'+v"></image>
		</swiper-item>
	</swiper>
	</view>
	<!-- 大灰线 -->
	<view class="grey"></view>
	<view class="Venuejieshao">
		<view>
				 场馆介绍
		</view>
	</view>
	<view class="box">
		
		
	<view class="zihua">
		<view class="zi">
			{{one}}
		</view>
		<view class="hua">
			<image :src="'/static/image-che/'+picture[0]" ></image>		
		</view>
	</view>
	<view class="zihua">
		<view class="zi">
			{{two}}
		</view>
		<view class="hua">
			<image :src="'/static/image-che/'+picture[1]" ></image>		
		</view>
	</view>
	<view class="zihua">
		<view class="zi">
			{{three}}
		</view>
		<view class="hua">
			<image :src="'/static/image-che/'+picture[2]" ></image>		
		</view>
	</view>
	
	
	</view>
	<view class=" Venuedizhi">
		<view class="tan">
			<view class="gang"></view>
		<view class="yang">
				场馆地址
		</view>
		</view>
		
		<view>
			<button @click="yuyue" type="primary" size="mini">预约课程</button>
		</view>
	</view>
	<view class="dizhidetails">
	<view><text class="iconfont icon-dingwei"></text>{{address}}</view>
	<view><text class="iconfont icon-dianhua dianhua"></text>{{phone}}</view>
	<view><text class="iconfont icon-good"></text>  <text class="iconfont xing icon-16pxshoucang"></text><text class="iconfont xing icon-16pxshoucang"></text><text class="iconfont xing icon-16pxshoucang"></text><text class="iconfont xing icon-16pxshoucang"></text><text class="iconfont xing icon-16pxshoucang"></text>好评</view>
	
	</view>
</template>
<script>
	import myRequest from '../../utils/myRequest.js';
	import {toRefs,reactive} from 'vue';
	import {onLoad,onShow} from '@dcloudio/uni-app';
	import store from '../../store/index.js';
	export default{
		setup(){
			let data=reactive({
				picture:[],
				zihua:[],
				one:'',
				two:'',
				three:'',
				address:'',
				phone:'',
				yuyue(){
				uni.switchTab({
					url: '/pages/Appointment/Appointment'
				})
				},
				// 来吧展示
				// zhanshi(i){
				// 	myRequest({
				// 	url:'/getvenuesId',				
				// 	data:{
				// 		id:i
				// 	}
				// }).then((res)=>{
				// 	// console.log(res.data.data)
					
				// 	data.zihua=res.data.data[0]
				// 	// console.log(data.zihua)
				// 	data.picture=JSON.parse(data.zihua.venuesimg)
				// })
					
				// }
			});
			onLoad((option)=>{
				// console.log(store.state.venuesArr)
			store.state.che.venuesArr.forEach((item)=>{
				if(item.venuesId==option.id){
					data.zihua.push(item)
				}
			})
			// console.log(data.zihua[0].venuesimg)
		    data.picture=data.zihua[0].venuesimg
			data.one=data.zihua[0].vintroduceone
			data.two=data.zihua[0].vintroducetwo
			data.three=data.zihua[0].vintroducethree
			data.address=data.zihua[0].venuesAddress
			data.phone=data.zihua[0].venuesPhone
			}),
			onShow(function(){
				
			})
			return {...toRefs(data)}
		}
	
	}
	
</script>

<style lang="less" scoped>
	@import url('~@/static/font-che/iconfont.css');
	.lunbo{
		width: 750rpx;
		height: 390rpx;
		swiper{
			height: 390rpx;
		}
		.lunbo swiper-item{
			height: 390rpx;
		}
		image{
			width: 750rpx;
			height: 390rpx;
		}
	}
	.grey{
		// width: 750rpx;
		height: 30rpx;
		background-color: rgb(242,242,242);
	}
	.Venuejieshao{
		padding: 30rpx 20rpx;
		border: 1px solid rgb(233,233,233);
		view:nth-child(1){
		border-left: 2px solid rgb(0,121,254);
		padding-left: 10rpx;	
		// padding-bottom: 20rpx;
		font-size: 28rpx;
		font-weight: 700;
	}
	}
	.box{
		padding: 18rpx 26rpx 50rpx 26rpx;
	}
	.zihua{
		margin-bottom: 20rpx;
		.zi{
			font-size: 28rpx;
			margin-bottom: 20rpx;
		}
		.hua{
			height: 300rpx;
			width: 698rpx;
			border-radius: 20rpx;
			image{
				height: 300rpx;
				width: 698rpx;
				border-radius: 20rpx;
			}
		}
	}
	.Venuedizhi{
		padding: 20rpx 20rpx 10rpx 20rpx;
		display: flex;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		border: 1px solid rgb(233,233,233);
		.yang{
			padding: 10rpx;
			box-sizing: border-box;
				font-size: 28rpx;
				font-weight: 700;
		}
	}
	.Venuedizhi .gang{
		height: 34rpx;
		width: 5rpx;
		background-color: rgb(0,121,254);
	}
.tan{
	display: flex;
	align-items: center;
}
.dizhidetails{
	padding:26rpx 30rpx 10rpx 30rpx;
	border-bottom: 1px solid rgb(233,233,233);
	view{
		font-size: 28rpx;
		margin-bottom: 20rpx;
		
		text{
			margin-right: 24rpx;
			font-size: 36rpx;
		}
		.dianhua{
			font-size: 32rpx;
		}
		.xing{
	color: rgb(18,150,219);
	margin-right: 18rpx;
}
	}
}

</style>
